 /* 页面内容超过视图页面时，会自动出现下拉条，影响原有的css样式 */
 body{
  overflow-y:scroll;
}

/**手机**/
@media only screen and (min-width: 320px) and (max-width: 719px) {

  /**顶部栏**/
  .header {
    padding-top: .6rem;
    padding-bottom: .6rem;
  }

  .header-box {
    width: 100%;
  }

  /**导航栏**/
  .common-menu {
    width: 100%;
  }

  /**副导航栏**/
  .sub-nav {
    width: 100%;
  }

  .sub-nav .el-button {
    width: calc(100% / 7);
    margin-left:0 ;
    margin-right: 0;
  }

  /* .sub-nav .el-button a {
    width: 100%;
    border: none;
    border-radius: 0;
  } */
  /**主体容器**/
  /**
  修改时间：6.12
  width:100%修改为98%,目的在手机端显示漂亮一点
  **/
  .contains {
    width: 98%;
    padding: .22rem;
  }
}

/**平板**/
@media screen and (min-width: 720px) and (max-width: 1199px) {

  /**顶部栏**/
  .header-box {
    width: 700px;
  }

  /**导航栏**/
  .nav {
    width: 100%;
  }

  .common-menu {
    width: 100%;
  }

  /**副导航栏**/
  .sub-nav {
    width: 100%;
  }
}

/**当浏览器可视区域大于720px时**/
@media screen and (min-width: 720px) and (max-width: 999px) {

  /**主体容器**/
  .contains {
    width: 718px;
  }
}

/**当浏览器可视区域大于1000px时**/
@media screen and (min-width: 1000px) and (max-width: 1200px) {

  /**主体容器**/
  .contains {
    width: 960px;
  }
}

/**检测设备横竖屏**/
.landscape {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: #000;
}

/*竖屏状态*/
@media (orientation: portrait) {
  .landscape {
    display: none;
  }
}

/*横屏状态*/
@media (orientation: landscape) {
  .landscape {
    display: block;
  }
}

/* ----------- iPhone 4/4S/5/5S/5C/SE ----------- */
@media only screen and (min-width: 320px) and (max-width: 359px) {

    /**登录页**/
    .login-box {
      width: 87%;
      /* border-radius: 2px; */
      margin: 200px auto;
      }
    .btn {
       margin-left: 4rem;
        }

  /*图表展示*/
  .overview-chart {
    height: 15rem;
  }

  .item-chart {
    width: 100%;
    height: 12rem;
  }
}

/* ----------- iPhone 6/6S and Android ----------- */
@media only screen and (min-width: 360px) and (max-width: 413px) {

  /**登录页**/
  .login-box {
    width: 88.2%;
    /* border-radius: 2px; */
    margin: 280px auto;
    }
  .btn {
     margin-left: 7.2rem;
      }

  /*图表展示*/
  .overview-chart {
    height: 17.5rem;
  }

  .item-chart {
    width: 100%;
    height: 14rem;
  }
}

/* ----------- iPhone 6 Plus/6S Plus ----------- */
@media only screen and (min-width: 414px) and (max-width: 719px) {

  /**登录页**/
  .login-box {
    width: 89.6%;
    /* border-radius: 2px; */
    margin: 280px auto;
    }
  .btn {
     margin-left: 6.25rem;
      }

  /*图表展示*/
  .overview-chart {
    height: 20rem;
  }

  .item-chart {
    width: 100%;
    height: 16rem;
  }
}

/**当浏览器可视区域大于720px时**/
@media screen and (min-width: 720px) and (max-width: 999px) {

  .item-chart {
    width: 50%;
    height: 15rem;
  }
}